<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>移库记录字段调整测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .test-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .test-title {
            color: #409eff;
            border-bottom: 2px solid #409eff;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        .comparison-table th,
        .comparison-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        .comparison-table th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        .removed-field {
            color: #f56c6c;
            text-decoration: line-through;
            background-color: #fef0f0;
        }
        .added-field {
            color: #67c23a;
            font-weight: bold;
            background-color: #f0f9ff;
        }
        .kept-field {
            color: #606266;
            background-color: #f8f9fa;
        }
        .demo-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            font-size: 12px;
        }
        .demo-table th,
        .demo-table td {
            border: 1px solid #ebeef5;
            padding: 8px 4px;
            text-align: center;
        }
        .demo-table th {
            background-color: #f5f7fa;
            color: #606266;
            font-weight: 600;
        }
        .demo-table tr:hover {
            background-color: #f5f7fa;
        }
        .tag {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 11px;
        }
        .tag-success {
            background-color: #f0f9ff;
            color: #67c23a;
            border: 1px solid #67c23a;
        }
        .tag-warning {
            background-color: #fdf6ec;
            color: #e6a23c;
            border: 1px solid #e6a23c;
        }
        .field-flow {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 20px 0;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 4px;
        }
        .field-box {
            padding: 10px;
            border-radius: 4px;
            text-align: center;
            min-width: 100px;
        }
        .field-box.removed {
            background-color: #fef0f0;
            color: #f56c6c;
            text-decoration: line-through;
        }
        .field-box.added {
            background-color: #f0f9ff;
            color: #67c23a;
            font-weight: bold;
        }
        .field-box.kept {
            background-color: #e8f4fd;
            color: #409eff;
        }
        .arrow {
            font-size: 20px;
            color: #909399;
        }
        .json-data {
            background: #2d3748;
            color: #e2e8f0;
            padding: 15px;
            border-radius: 4px;
            font-family: monospace;
            margin: 10px 0;
            overflow-x: auto;
            font-size: 12px;
        }
        .highlight-removed {
            color: #f56c6c;
            text-decoration: line-through;
        }
        .highlight-added {
            color: #67c23a;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>移库记录字段调整测试页面</h1>

    <div class="test-container">
        <h2 class="test-title">字段变更概览</h2>

        <table class="comparison-table">
            <thead>
                <tr>
                    <th>变更类型</th>
                    <th>字段名</th>
                    <th>中文名称</th>
                    <th>列宽</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr class="removed-field">
                    <td>移除</td>
                    <td>transferTime</td>
                    <td>移库时间</td>
                    <td>180px</td>
                    <td>用创建时间替代</td>
                </tr>
                <tr class="removed-field">
                    <td>移除</td>
                    <td>transferReason</td>
                    <td>移库原因</td>
                    <td>200px</td>
                    <td>业务需求变更</td>
                </tr>
                <tr class="removed-field">
                    <td>移除</td>
                    <td>remark</td>
                    <td>备注</td>
                    <td>150px</td>
                    <td>简化表格</td>
                </tr>
                <tr class="added-field">
                    <td>新增</td>
                    <td>materialCode</td>
                    <td>物料编码</td>
                    <td>120px</td>
                    <td>移库时的物料编码</td>
                </tr>
                <tr class="added-field">
                    <td>新增</td>
                    <td>materialName</td>
                    <td>物料名称</td>
                    <td>180px</td>
                    <td>移库时的物料名称</td>
                </tr>
                <tr class="added-field">
                    <td>新增</td>
                    <td>projectCode</td>
                    <td>项目编码</td>
                    <td>120px</td>
                    <td>关联的项目编码</td>
                </tr>
                <tr class="added-field">
                    <td>新增</td>
                    <td>projectName</td>
                    <td>项目名称</td>
                    <td>150px</td>
                    <td>关联的项目名称</td>
                </tr>
                <tr class="added-field">
                    <td>新增</td>
                    <td>createTime</td>
                    <td>出库时间</td>
                    <td>180px</td>
                    <td>器具从源库房出库的时间</td>
                </tr>
                <tr class="added-field">
                    <td>新增</td>
                    <td>updateTime</td>
                    <td>入库时间</td>
                    <td>180px</td>
                    <td>器具到达目标库房入库的时间</td>
                </tr>
                <tr class="kept-field">
                    <td>保留</td>
                    <td>sourceWarehouseName</td>
                    <td>源库房</td>
                    <td>150px</td>
                    <td>列宽从180px调整为150px</td>
                </tr>
                <tr class="kept-field">
                    <td>保留</td>
                    <td>targetWarehouseName</td>
                    <td>目标库房</td>
                    <td>150px</td>
                    <td>列宽从180px调整为150px</td>
                </tr>
                <tr class="kept-field">
                    <td>保留</td>
                    <td>operatorName</td>
                    <td>操作人员</td>
                    <td>120px</td>
                    <td>保持不变</td>
                </tr>
                <tr class="kept-field">
                    <td>保留</td>
                    <td>transferStatus</td>
                    <td>状态</td>
                    <td>100px</td>
                    <td>保持不变</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="test-container">
        <h2 class="test-title">表格列顺序变化</h2>

        <h3>修改前的列顺序：</h3>
        <div class="field-flow">
            <div class="field-box removed">移库时间</div>
            <span class="arrow">→</span>
            <div class="field-box kept">源库房</div>
            <span class="arrow">→</span>
            <div class="field-box kept">目标库房</div>
            <span class="arrow">→</span>
            <div class="field-box removed">移库原因</div>
            <span class="arrow">→</span>
            <div class="field-box kept">操作人员</div>
            <span class="arrow">→</span>
            <div class="field-box kept">状态</div>
            <span class="arrow">→</span>
            <div class="field-box removed">备注</div>
        </div>

        <h3>修改后的列顺序：</h3>
        <div class="field-flow">
            <div class="field-box kept">源库房</div>
            <span class="arrow">→</span>
            <div class="field-box kept">目标库房</div>
            <span class="arrow">→</span>
            <div class="field-box added">物料编码</div>
            <span class="arrow">→</span>
            <div class="field-box added">物料名称</div>
            <span class="arrow">→</span>
            <div class="field-box added">项目编码</div>
        </div>
        <div class="field-flow">
            <div class="field-box added">项目名称</div>
            <span class="arrow">→</span>
            <div class="field-box kept">操作人员</div>
            <span class="arrow">→</span>
            <div class="field-box kept">状态</div>
            <span class="arrow">→</span>
            <div class="field-box added">出库时间</div>
            <span class="arrow">→</span>
            <div class="field-box added">入库时间</div>
        </div>
    </div>

    <div class="test-container">
        <h2 class="test-title">数据结构对比</h2>

        <h3>修改前的数据结构：</h3>
        <div class="json-data">
{
  <span class="highlight-removed">"transferTime": "2024-01-12T14:30:00",</span>
  "sourceWarehouseName": "华北库房",
  "targetWarehouseName": "华东中央库房",
  <span class="highlight-removed">"transferReason": "库存调配",</span>
  "operatorName": "赵六",
  "transferStatus": "2",
  <span class="highlight-removed">"remark": "正常调配"</span>
}
        </div>

        <h3>修改后的数据结构：</h3>
        <div class="json-data">
{
  "sourceWarehouseName": "华北库房",
  "targetWarehouseName": "华东中央库房",
  <span class="highlight-added">"materialCode": "MAT001",</span>
  <span class="highlight-added">"materialName": "电子元件A型",</span>
  <span class="highlight-added">"projectCode": "PRJ2024001",</span>
  <span class="highlight-added">"projectName": "智能制造项目一期",</span>
  "operatorName": "赵六",
  "transferStatus": "2",
  <span class="highlight-added">"createTime": "2024-01-12T14:30:00", // 出库时间</span>
  <span class="highlight-added">"updateTime": "2024-01-12T16:45:00"  // 入库时间</span>
}
        </div>
    </div>

    <div class="test-container">
        <h2 class="test-title">表格效果演示</h2>

        <table class="demo-table">
            <thead>
                <tr>
                    <th>源库房</th>
                    <th>目标库房</th>
                    <th>物料编码</th>
                    <th>物料名称</th>
                    <th>项目编码</th>
                    <th>项目名称</th>
                    <th>操作人员</th>
                    <th>状态</th>
                    <th>出库时间</th>
                    <th>入库时间</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>华北库房</td>
                    <td>华东中央库房</td>
                    <td>MAT001</td>
                    <td>电子元件A型</td>
                    <td>PRJ2024001</td>
                    <td>智能制造项目一期</td>
                    <td>赵六</td>
                    <td><span class="tag tag-success">已完成</span></td>
                    <td>2024-01-12 14:30:00</td>
                    <td>2024-01-12 16:45:00</td>
                </tr>
                <tr>
                    <td>华南库房</td>
                    <td>华北库房</td>
                    <td>MAT002</td>
                    <td>精密仪器配件</td>
                    <td>PRJ2024002</td>
                    <td>自动化生产线改造</td>
                    <td>钱七</td>
                    <td><span class="tag tag-success">已完成</span></td>
                    <td>2024-01-10 11:20:00</td>
                    <td>2024-01-10 15:30:00</td>
                </tr>
                <tr>
                    <td>华东中央库房</td>
                    <td>华南库房</td>
                    <td>MAT003</td>
                    <td>工业传感器</td>
                    <td>PRJ2024003</td>
                    <td>物联网监控系统</td>
                    <td>孙八</td>
                    <td><span class="tag tag-warning">进行中</span></td>
                    <td>2024-01-15 09:15:00</td>
                    <td>2024-01-15 09:15:00</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="test-container">
        <h2 class="test-title">业务价值分析</h2>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
            <div style="padding: 15px; background: #f0f9ff; border-radius: 4px;">
                <h4 style="color: #409eff; margin-top: 0;">物料追溯</h4>
                <ul>
                    <li>通过物料编码快速识别物料类型</li>
                    <li>物料名称直观显示具体物料信息</li>
                    <li>便于物料流向的追踪和管理</li>
                </ul>
            </div>
            <div style="padding: 15px; background: #f0f9ff; border-radius: 4px;">
                <h4 style="color: #67c23a; margin-top: 0;">项目关联</h4>
                <ul>
                    <li>项目编码关联具体业务项目</li>
                    <li>项目名称了解移库的业务背景</li>
                    <li>便于项目物料的统计和分析</li>
                </ul>
            </div>
            <div style="padding: 15px; background: #fdf6ec; border-radius: 4px;">
                <h4 style="color: #e6a23c; margin-top: 0;">时间追踪</h4>
                <ul>
                    <li>创建时间记录移库操作发起时间</li>
                    <li>修改时间记录状态变更时间</li>
                    <li>便于分析移库操作的时效性</li>
                </ul>
            </div>
            <div style="padding: 15px; background: #f0f2f5; border-radius: 4px;">
                <h4 style="color: #606266; margin-top: 0;">数据完整性</h4>
                <ul>
                    <li>提供更完整的移库记录信息</li>
                    <li>支持更详细的业务分析</li>
                    <li>便于生成各类统计报表</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="test-container">
        <h2 class="test-title">测试验证步骤</h2>

        <ol>
            <li><strong>打开器具详情</strong>：
                <ul>
                    <li>在器具管理页面点击"详情"按钮</li>
                    <li>抽屉从右侧滑出</li>
                </ul>
            </li>
            <li><strong>切换到移库记录标签页</strong>：
                <ul>
                    <li>点击"移库记录"标签</li>
                    <li>验证表格显示10列字段</li>
                </ul>
            </li>
            <li><strong>验证新增字段</strong>：
                <ul>
                    <li>检查物料编码、物料名称是否显示</li>
                    <li>检查项目编码、项目名称是否显示</li>
                    <li>检查创建时间、修改时间格式是否正确</li>
                </ul>
            </li>
            <li><strong>验证移除字段</strong>：
                <ul>
                    <li>确认移库时间、移库原因、备注字段已移除</li>
                    <li>表格布局整洁美观</li>
                </ul>
            </li>
            <li><strong>验证省略号效果</strong>：
                <ul>
                    <li>测试长内容字段的省略号提示</li>
                    <li>鼠标悬浮查看完整内容</li>
                </ul>
            </li>
        </ol>
    </div>

    <script>
        console.log('移库记录字段调整测试页面已加载')
        console.log('请按照测试步骤验证字段调整效果')

        // 模拟新的数据结构
        const newDataStructure = [
            {
                sourceWarehouseName: '华北库房',
                targetWarehouseName: '华东中央库房',
                materialCode: 'MAT001',
                materialName: '电子元件A型',
                projectCode: 'PRJ2024001',
                projectName: '智能制造项目一期',
                operatorName: '赵六',
                transferStatus: '2',
                createTime: '2024-01-12T14:30:00',
                updateTime: '2024-01-12T16:45:00'
            }
        ]

        console.log('新的数据结构示例：', newDataStructure)
    </script>
</body>
</html>
